<template>
	<view class="home-container">
		<!-- 搜索模块 -->
		<view class="search-section">
			<view class="search-box">
				<input v-model="searchQuery" type="text" placeholder="搜索你想了解的医学证书" @input="handleSearch">
				<text class="search-icon">🔍</text>
			</view>

			<!-- 搜索结果 -->
			<view v-if="showSearchResults" class="search-results">
				<view v-if="searchResults.length === 0" class="no-result">
					暂无相关内容
				</view>
				<view v-else v-for="(result, index) in searchResults" :key="index" class="search-result-item"
					@tap="navigateToDetail(result)">
					{{ result.title }}
				</view>
			</view>
		</view>

		<!-- 鼓励语模块 -->
		<view class="motto-section">
			<text class="motto-text">{{ dailyMotto }}</text>
		</view>

		<!-- 政策公告轮播 -->
		<view class="notice-section">
			<swiper class="notice-swiper" :autoplay="true" :interval="3000" :circular="true" :vertical="false">
				<swiper-item v-for="(notice, index) in notices" :key="index">
					<view class="notice-item" @tap="showNoticeDetail(notice)">
						{{ notice.title }}
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 考试倒计时 -->
		<view class="countdown-section">
			<view class="countdown-title">距离执业医师考试还有</view>
			<view class="countdown">
				<text class="count-num">{{ countdownData.days }}</text> 天
				<text class="count-num">{{ countdownData.hours }}</text> 时
				<text class="count-num">{{ countdownData.minutes }}</text> 分
				<text class="count-num">{{ countdownData.seconds }}</text> 秒
			</view>
		</view>

		<!-- 学习群按钮 -->
		<view class="study-group-section">
			<button class="join-group-btn" @click="showGroupList" :disabled="!isFollowed">
				进入考证学习群
			</button>
			<text v-if="!isFollowed" class="follow-tip">请先关注小程序获取更多服务</text>
		</view>

		<!-- 成功经验分享 -->
		<view class="experience-section">
			<text class="section-title">成功经验分享</text>
			<view class="experience-cards">
				<view v-for="(exp, index) in experiences" :key="index" class="experience-card"
					@click="showExperienceDetail(exp)">
					<text class="exp-title">{{ exp.title }}</text>
					<text class="exp-summary">{{ exp.content }}</text>
				</view>
			</view>
		</view>

		<!-- 群组选择弹窗 -->
		<uni-popup ref="popup" type="center">
			<view class="popup-content">
				<view class="popup-title">选择学习群</view>
				<view class="group-list">
					<view v-for="(group, index) in studyGroups" :key="index" class="group-item"
						@click="showQRCode(group)">
						{{ group.name }}
					</view>
				</view>
				<button class="close-btn" @click="closePopup">关闭</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getCertList,
		getTopicList,
	} from "@/api/index.js"
	export default {
		data() {
			return {
				// 搜索相关
				searchQuery: '',
				showSearchResults: false,
				searchResults: [],

				// 每日鼓励语
				dailyMotto: '医者仁心，学无止境。今天的付出是明天的收获。',
				mottoList: [
					'医者仁心，学无止境。今天的付出是明天的收获。',
					'坚持就是胜利，医路漫漫，终有所成。',
					'一分耕耘一分收获，为梦想加油！',
					'学医路上，你并不孤单。'
				],

				// 政策公告
				notices: [{
						id: 1,
						title: '中医执业医师考试改革2024-01-18'
					},
					{
						id: 2,
						title: '2024年医师资格考试时间安排'
					},
					{
						id: 3,
						title: '最新执业医师考试大纲发布'
					}
				],

				// 倒计时
				countdownData: {
					days: '',
					hours: '',
					minutes: '',
					seconds: ''
				},
				targetDate: '2025-06-07 00:00:00',

				// 学习群相关
				isFollowed: true,
				studyGroups: [{
						id: 1,
						name: '执业医师考证群',
						qrcode: ''
					},
					{
						id: 2,
						name: '中医执业医师群',
						qrcode: ''
					},
					{
						id: 3,
						name: '临床执业医师群',
						qrcode: ''
					},
					{
						id: 4,
						name: '执业护士考证群',
						qrcode: ''
					},
					{
						id: 5,
						name: '医学综合交流群',
						qrcode: ''
					}
				],

				// 经验分享
				experiences: [{
						id: 1,
						title: '三个月通过执业医师',
						summary: '备考经验分享'
					},
					{
						id: 2,
						title: '中医执业医师考试技巧',
						summary: '考试重点解析'
					},
					{
						id: 3,
						title: '如何合理安排复习时间',
						summary: '时间管理经验'
					}
				]
			}
		},
		async onLoad() {
			// 初始化每日鼓励语
			this.updateDailyMotto()

			// 每天更新一次鼓励语
			setInterval(this.updateDailyMotto, 24 * 60 * 60 * 1000)
			this.countdown(this.targetDate)

			const list = await getTopicList()
			this.experiences = list.data.data.slice(0, 3)
		},
		methods: {
			countdown(targetDate, callback) {
				// 目标时间
				const targetTime = new Date(targetDate).getTime();

				// 每秒更新一次倒计时
				const timer = setInterval(() => {
						// 当前时间
						const now = new Date().getTime();

						// 剩余时间（毫秒）
						const timeRemaining = targetTime - now;

						// 如果倒计时结束
						if (timeRemaining <= 0) {
							clearInterval(timer); // 停止计时器
							callback("倒计时结束！"); // 执行回调
							return;
						}

						// 计算天、小时、分钟、秒
						const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
						const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
						const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
						const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);
						// 调用回调函数，返回剩余时间
						// callback({ days, hours, minutes, seconds });
						this.countdownData.days = days
						this.countdownData.hours = hours
						this.countdownData.minutes = minutes
						this.countdownData.seconds = seconds
					},
					1000); // 每秒更新一次
			},
			// 搜索处理
			async handleSearch() {
				if (this.searchQuery.trim()) {
					let res = await getCertList({
						title: this.searchQuery
					})
					this.certificates = res.data.data
					if (res.statusCode === 200) {
						this.showSearchResults = true
						// TODO: 实现搜索逻辑
						this.searchResults = res.data.data
					}
					console.log(res, '???????????????');

				} else {
					this.showSearchResults = false
				}
			},

			// 群组相关
			showGroupList() {
				this.$refs.popup.open()
			},

			closePopup() {
				this.$refs.popup.close()
			},

			showQRCode(group) {
				uni.showToast({
					title: '暂无相关内容',
					icon: 'none'
				})
			},

			// 经验分享卡片样式
			cardStyle(index) {
				return {
					transform: `translateY(${index * -10}px)`,
					zIndex: this.experiences.length - index
				}
			},

			// 详情页跳转
			showExperienceDetail(exp) {
				uni.showToast({
					title: '暂无相关内容',
					icon: 'none'
				})
			},

			showNoticeDetail(notice) {
				uni.showToast({
					title: '暂无相关内容',
					icon: 'none'
				})
			},

			navigateToDetail(result) {
				uni.navigateTo({
					url: `/pages/index/searchCert?id=${result.id}`
				})
			},

			// 更新每日鼓励语
			updateDailyMotto() {
				const index = Math.floor(Math.random() * this.mottoList.length)
				this.dailyMotto = this.mottoList[index]
			}
		},

	}
</script>

<style>
	.home-container {
		padding: 30rpx;
	}

	.search-section {
		position: relative;
		margin-bottom: 30rpx;
	}

	.search-box {
		position: relative;
		width: 100%;
	}

	.search-box input {
		box-sizing: border-box;
		width: 100%;
		height: 80rpx;
		padding: 0 80rpx 0 30rpx;
		border: 2rpx solid #ddd;
		border-radius: 40rpx;
		font-size: 28rpx;
		background: #fff;
	}

	.search-icon {
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.motto-section {
		background: linear-gradient(135deg, #4a90e2, #67c23a);
		padding: 30rpx;
		border-radius: 16rpx;
		margin-bottom: 30rpx;
	}

	.motto-text {
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		display: block;
	}

	.notice-section {
		background: #f5f5f5;
		padding: 20rpx;
		margin-bottom: 30rpx;
		border-radius: 8rpx;
	}

	.notice-swiper {
		height: 80rpx;
	}

	.notice-item {
		line-height: 80rpx;
		font-size: 28rpx;
		padding: 0 20rpx;
	}

	.countdown-section {
		text-align: center;
		margin: 40rpx 0;
		background: #fff;
		padding: 30rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
	}

	.countdown-title {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 20rpx;
	}

	.count-num {
		color: #ff6b6b;
		font-size: 48rpx;
		font-weight: bold;
		margin: 0 10rpx;
	}

	.study-group-section {
		text-align: center;
		margin-bottom: 50rpx;
	}

	.join-group-btn {
		background: #4a90e2;
		color: white;
		width: 80%;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 44rpx;
		font-size: 32rpx;
		border: none;
	}

	.join-group-btn[disabled] {
		background: #ccc;
	}

	.follow-tip {
		color: #ff6b6b;
		font-size: 24rpx;
		margin-top: 20rpx;
	}

	.experience-section {
		padding: 20rpx 0;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
		display: block;
	}

	.experience-cards {
		position: relative;
		padding: 20rpx 0;
	}

	.experience-card {
		background: white;
		padding: 30rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 20rpx;
		transition: transform 0.3s ease;
	}

	.exp-title {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		display: block;
	}

	.exp-summary {
		font-size: 24rpx;
		color: #666;
		white-space: nowrap;
		/* 禁止文本换行 */
		overflow: hidden;
		/* 隐藏溢出的文本 */
		text-overflow: ellipsis;
		/* 超出部分用省略号表示 */
		width: 400rpx;
		/* 需要指定一个固定宽度或最大宽度，否则不会出现省略效果 */
	}

	.popup-content {
		background: white;
		width: 600rpx;
		border-radius: 16rpx;
		padding: 30rpx;
	}

	.popup-title {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.group-list {
		margin: 30rpx 0;
	}

	.group-item {
		padding: 20rpx;
		border-bottom: 2rpx solid #eee;
		font-size: 28rpx;
	}

	.close-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background: #4a90e2;
		color: white;
		border-radius: 44rpx;
		margin-top: 30rpx;
		border: none;
	}

	.search-results {
		position: absolute;
		top: 90rpx;
		left: 0;
		right: 0;
		background: #fff;
		border: 2rpx solid #eee;
		border-radius: 8rpx;
		z-index: 100;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
	}

	.search-result-item {
		padding: 20rpx 30rpx;
		border-bottom: 2rpx solid #eee;
	}

	.no-result {
		padding: 30rpx;
		text-align: center;
		color: #999;
	}
</style>